<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in pckList" :key="index">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ item.name }}</span>
            <el-button
              @click="order(item.id)"
              style="float: right; padding: 3px 0"
              type="text"
              >立即购买</el-button
            >
          </div>
          <div class="text item">
            <p>
              套餐价格：￥{{ item.price }}/{{ item.timenum }}{{ item.timeunit }}
            </p>
            <p>套餐功能：</p>
            <ul>
              <li v-for="(p, index) in item.perms" :key="index">
                {{ p.permName }}
              </li>
            </ul>
          </div>
          <div>
            <span style="color: rgb(255, 0, 64)">{{
              item.state == 1 ? "已购买" : ""
            }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="支付二维码" :visible.sync="dialogVisible" width="30%">
      <div ref="qrcode"></div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2-fix";
import { mapGetters } from "vuex";
import { fetchPckList } from "@/api/pck";
import { order, getPayUrl } from "@/api/pay";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      pckList: [],
      dialogVisible: false,
      ws: {},
    };
  },
  created() {
    fetchPckList().then((res) => {
      this.pckList = res.data;
    });
  },
  methods: {
    order(pckId) {
      order(pckId).then((res) => {
        if (res.ok) {
          //获取订单id
          var orderId = res.data;

          //发送支付请求，获取支付链接
          getPayUrl(orderId).then((res) => {
            if (res.ok) {
              console.log(res.data);
              this.dialogVisible = true;
              this.$nextTick(() => {
                //建立websocket连接
                this.ws = new WebSocket("ws://localhost:8001/pay/" + orderId);
                var _this = this;
                this.ws.onmessage = function (event) {
                  console.log(event.data);

                  if (event.data == "paysuccess") {
                    _this.dialogVisible = false;
                    _this.$message({
                      type: "success",
                      message: "支付成功",
                    });
                  }
                };

                this.ws.onopen = function (event) {
                  console.log("open");
                };
                //clear
                this.$refs.qrcode.innerHTML = "";

                //生成二维码
                new QRCode(this.$refs.qrcode, {
                  text: res.data, //URL地址
                  width: 300,
                  height: 300,
                  colorDark: "#000", //二维码颜色
                  colorLight: "#ffffff", //背景颜色
                });
              });
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
